<template>
  <div class="home">
    <div class="content">
      <div class="left">
        <div class="leftContent">
          <div class="author" @click="toOtherPerson()">
            <div>
              <el-avatar size="large" :src="urlImg"></el-avatar>
            </div>
            <div class="authorInfo">
              <div class="name">{{ articleData.userid.name }}</div>
              <div class="subtitle">{{ articleData.userid.autograph }}</div>
            </div>
          </div>
          <!-- <div style="width: 80%;margin:20px auto;">
            <el-image
              style="width: 100%;"
              :src="articleData.articleimg"
              :fit="fit"
            ></el-image>
          </div>-->
          <div class="ql-snow ql-editor" v-html="articleData.content"></div>

          <div class="shareList" v-if="articleData.shareArticle&&articleData.shareArticle.length">
            <div class="shareTitle">文章分享</div>
            <ul>
              <li
                v-for="(item,index) in articleData.shareArticle"
                :key="index"
                @click="toUrl(item.url)"
              >{{item.title}}</li>
            </ul>
          </div>

          <actionBar
            ref="actionBar"
            :articleData="articleData"
            :isLike="isLike"
            :commentData="commentData"
            :commentDataSize="commentDataSize"
            @giveALike="giveALike"
            @articleLike="articleLike"
            @comment="comment"
            @comeBalckComment="comeBalckComment"
            @getPraise="getPraise"
            @delectFirComm="delectFirComm"
            @delectSecComm="delectSecComm"
            @moreComment="moreComment"
          ></actionBar>
        </div>
      </div>

      <div class="right">
        <userRight :authorData="articleData.userid" :articleId="articleData._id"></userRight>
      </div>
    </div>
  </div>
</template>

<script>
// import { htmlCon } from "./data";
import { defaultAvatarURL } from "../../utils/global";
import { get_article, put_article } from "../../api/article";
import { get_history, post_history } from "../../api/history";
import { get_like, post_like, delete_like } from "../../api/like";
import {
  post_comment,
  getComment,
  put_comment,
  delectComment
} from "../../api/comment";
import { post_comfabulous, delete_comfabulous } from "../../api/comfabulous";
// import { post_comfabulous } from "../../api/comfabulous";
import userRight from "./components/right";
import actionBar from "./components/actionBar";
export default {
  name: "HelpDetails",
  data() {
    return {
      articleData: {
        userid: {
          name: ""
        },
        praise: []
      },
      urlImg: "",
      isLike: false,
      like_id: null,
      commentData: [],
      skip: 0, //评论数据拉取开始位置
      limit: 15, //拉取条数
      commentDataSize: 0 //评论总数量
    };
  },
  components: {
    userRight,
    actionBar
  },
  watch: {
    async $route() {
      //监听路由是否变化
      if (this.$route.query.article_id) {
        // 判断条件1  判断传递值的变化
        //获取文章数据
        if (!this.$route.query.article_id) {
          this.$router.push({
            path: "/zhuhaiPortCircle"
          });
          return;
        }
        let articleData = await get_article({
          query: {
            _id: this.$route.query.article_id
          },
          populate: JSON.stringify([
            {
              path: "userid"
            }
          ])
        });
        // console.log("articleData", articleData.data[0]);
        this.articleData = articleData.data[0];
        this.urlImg = defaultAvatarURL + this.articleData.userid.head_portrait;
        this.queryHistory();
        this.getLike();
        this.get_Comment();
      }
    }
  },
  async created() {
    if (!this.$route.query.article_id) {
      this.$router.push({
        path: "/zhuhaiPortCircle"
      });
      return;
    }
    let articleData = await get_article({
      query: {
        _id: this.$route.query.article_id
      },
      populate: JSON.stringify([
        {
          path: "userid"
        }
      ])
    });
    // console.log("articleData", articleData.data[0]);
    this.articleData = articleData.data[0];
    this.urlImg = defaultAvatarURL + this.articleData.userid.head_portrait;
    this.queryHistory();
    this.getLike();
    this.get_Comment();
    // post_comfabulous({
    //   userid: this.$store.getters.userInfo._id,
    //   replyid: "5ebe40493a9402249051865f",
    //   commentid: "5ec4fe9bf1f6cf3558dd5a5f",
    //   content: "我是这是第一条评论的子评论",
    //   release_time: new Date()
    // });
  },
  methods: {
    // 获取评论
    async get_Comment() {
      let COM = await getComment({
        query: {
          articleid: this.articleData._id
        },
        skip: this.skip,
        limit: this.limit,
        count: true
      });
      this.commentData = COM.data;
      this.commentDataSize = COM.countnum;
      console.log("拉取评论", COM);
    },
    //判断浏览历史
    async queryHistory() {
      let queryData = await get_history({
        query: {
          articleid: this.articleData._id,
          userid: this.$store.getters.userInfo._id
        }
      });
      if (queryData.data.length == 0) {
        await put_article({
          query: {
            _id: this.articleData._id
          },
          update: {
            $inc: {
              reading: 1
            }
          }
        });

        await post_history({
          articleid: this.articleData._id,
          artictype: this.articleData.aeticletype,
          userid: this.$store.getters.userInfo._id,
          history_time: new Date()
        });

        // this.$message({
        //   showClose: true,
        //   message: "首次阅读获得积分",
        //   type: "success"
        // });
      }
      this.$finish_taskdata(1, this.$store.getters.userInfo._id);
    },
    //初始收藏
    async getLike() {
      let like = await get_like({
        query: {
          articleid: this.articleData._id,
          userid: this.$store.getters.userInfo._id
        }
      });
      console.log("like", like);
      if (like.data.length == 0) {
        this.isLike = false;
      } else {
        this.like_id = like.data[0]._id;
        this.isLike = true;
      }
    },
    //点赞
    async giveALike(isActive) {
      console.log("点赞事件", isActive);

      if (isActive) {
        // return;
        //取消点赞
        var index = this.articleData.praise.indexOf(
          this.$store.getters.userInfo._id
        );
        if (index > -1) {
          this.articleData.praise.splice(index, 1);
        }
        await put_article({
          query: {
            _id: this.articleData._id
          },
          update: {
            $pull: {
              praise: this.$store.getters.userInfo._id
            },
            $inc: {
              praiseSize: -1
            }
          }
        });
      } else {
        this.articleData.praise.push(this.$store.getters.userInfo._id);
        await put_article({
          query: {
            _id: this.articleData._id
          },
          update: {
            $addToSet: {
              praise: this.$store.getters.userInfo._id
            },
            $inc: {
              praiseSize: 1
            }
          }
        });
        this.$finish_taskdata(9, this.$store.getters.userInfo._id);
      }
    },
    //文章收藏
    async articleLike() {
      if (this.isLike) {
        await delete_like({
          query: {
            _id: this.like_id
          }
        });
        this.isLike = false;
      } else {
        let like = await post_like({
          articleid: this.articleData._id,
          artictype: this.articleData.aeticletype,
          userid: this.$store.getters.userInfo._id,
          like_time: new Date()
        });
        this.like_id = like.data._id;
        this.isLike = true;
        this.$finish_taskdata(4, this.$store.getters.userInfo._id);
      }
    },
    //发送文章评论
    async comment(commentTetx) {
      if (commentTetx == "") return;
      await post_comment({
        userid: this.$store.getters.userInfo._id,
        articleid: this.articleData._id,
        aeticletype: this.articleData.aeticletype,
        content: commentTetx,
        release_time: new Date()
      });
      await put_article({
        query: {
          _id: this.articleData._id
        },
        update: {
          $inc: {
            reply: 1
          }
        }
      });
      this.commentData.push({
        userid: this.$store.getters.userInfo,
        articleid: this.articleData._id,
        aeticletype: this.articleData.aeticletype,
        content: commentTetx,
        release_time: new Date(),
        praise: []
      });
      this.$refs.actionBar.commentTetx = "";
      this.$message({
        showClose: true,
        message: "消息已发送",
        type: "success"
      });
      // console.log("评论：", commentTetx);
      this.$finish_taskdata(3, this.$store.getters.userInfo._id);
    },
    //二级评论
    async comeBalckComment(commentid, replyid, index, comeBalckCommentTetx) {
      console.log(commentid, replyid, index, comeBalckCommentTetx);
      if (comeBalckCommentTetx == "") return;
      await post_comfabulous({
        userid: this.$store.getters.userInfo._id, //用户id
        commentid: commentid, //评论id
        replyid: replyid._id, //回复的人
        content: comeBalckCommentTetx, //评论内容
        release_time: new Date() //发布时间
      });
      this.commentData[index].secondComment.push({
        userid: this.$store.getters.userInfo, //用户id
        commentid: commentid, //评论id
        replyid: replyid, //回复的人
        content: comeBalckCommentTetx, //评论内容
        release_time: new Date() //发布时间
      });
      this.$refs.actionBar.comeBalckCommentTetx = "";
      this.$refs.actionBar.comeBalckInput = "";
      this.$message({
        showClose: true,
        message: "消息已发送",
        type: "success"
      });
    },
    //评论点赞
    async getPraise(isPra, comId, index) {
      if (isPra) {
        var arrIndex = this.commentData[index].praise.indexOf(
          this.$store.getters.userInfo._id
        );
        this.commentData[index].praise.splice(arrIndex, 1);
        await put_comment({
          query: {
            _id: comId
          },
          update: {
            $pull: {
              praise: this.$store.getters.userInfo._id
            }
          }
        });
      } else {
        this.commentData[index].praise.push(this.$store.getters.userInfo._id);
        await put_comment({
          query: {
            _id: comId
          },
          update: {
            $addToSet: {
              praise: this.$store.getters.userInfo._id
            }
          }
        });
      }
    },
    //删除一级评论
    async delectFirComm(item, index) {
      this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await delectComment({
          query: {
            _id: item
          }
        });
        await put_article({
          query: {
            _id: this.articleData._id
          },
          update: {
            $inc: {
              reply: -1
            }
          }
        });
        this.commentData.splice(index, 1);
        this.$message({
          showClose: true,
          type: "success",
          message: "删除成功!"
        });
      });
    },
    //删除二级评论
    async delectSecComm(item, index, index2) {
      this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await delete_comfabulous({
          query: {
            _id: item
          }
        });
        this.commentData[index].secondComment.splice(index2, 1);
        this.$message({
          showClose: true,
          type: "success",
          message: "删除成功!"
        });
      });
    },
    //更多评论
    async moreComment() {
      this.skip = this.skip + this.limit;
      let COM = await getComment({
        query: {
          articleid: this.articleData._id
        },
        skip: this.skip,
        limit: this.limit
      });
      this.commentData.concat(COM.data);
      this.commentData = this.commentData.concat(COM.data);
    },
    //其他用户主页
    toOtherPerson() {
      if (this.articleData.userid == this.$store.getters.userInfo._id) {
        this.$router.push({
          path: "/personalCenter",
          query: {}
        });
        return;
      }
      this.$router.push({
        path: "/otherPerson",
        query: {
          user_id: this.articleData.userid
        }
      });
    },
    toUrl(url) {
      window.open(url);
      // window.location.href = url;
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  // padding: 10px 10px;
  width: 100%;
  // margin-bottom: 300px;
}
.content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 20px;
  .left {
    width: 74%;
    .leftContent {
      background: #fff;
      width: 100%;
      box-sizing: border-box;
      padding: 20px;
      border-radius: 10px;
      .author {
        display: flex;
        &:hover {
          cursor: pointer;
        }
        .authorInfo {
          margin-left: 10px;
          .name {
            font-size: 15px;
            font-weight: 600;
          }
          .subtitle {
            font-size: 14px;
            color: #6c6c6c;
          }
        }
      }
      .shareList {
        .shareTitle {
          font-size: 18px;
          font-weight: 600;
          color: #757575;
          margin: 15px 0;
        }
        ul {
          margin-left: 15px;
          li {
            font-size: 16px;
            color: blue;
            cursor: pointer;
            margin-top: 8px;
            &:hover {
              font-weight: 600;
            }
          }
        }
      }
    }
  }

  .right {
    width: 25%;
  }
}
</style>
